<template>
  <div class="film-photos" v-if="film">
    <div class="film-photos-title">
      <span>剧照</span>
      <span class="film-photos-all" @click="isShowPopup = true">{{`全部(${film.photos.length})`}}<i
           class="iconfont icon-you"></i></span>
    </div>
    <swiper class="film-photos-swiper" :options="swiperOption">
      <swiper-slide class="photo-item" v-for="(photo, index) in film.photos" :key="index">
        <div class="photo-item-picture" :style="`background-image: url(${photo});`" @click="showFilmPhotos(index)">
        </div>
      </swiper-slide>
    </swiper>
    <!-- 弹出层 展示全部剧照 -->
    <van-popup v-model="isShowPopup" position="top" :close-on-popstate="true" :closeable="true"
               close-icon-position="top-left" :duration="0" :overlay-style="{'background-color': 'white'}">
      <h3>{{`剧照 (${film.photos.length})`}}</h3>
      <div class="all-photo-list">
        <img v-for="(photo, index) in film.photos" :key="index" class="all-photo-item" :src="photo"
             @click="showFilmPhotos(index)">
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { ImagePreview, Popup, NavBar } from 'vant'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.min.css'

export default {
  name: 'FilmPhotos',
  components: {
    Swiper,
    SwiperSlide,
    [Popup.name]: Popup,
    [NavBar.name]: NavBar
  },
  data () {
    return {
      swiperBannerList: [],
      swiperOption: {
        slidesPerView: 2,
        spaceBetween: 10
      },
      isShowPopup: false
    }
  },
  computed: {
    ...mapState('FilmModule', ['film'])
  },
  methods: {
    showFilmPhotos (index) {
      ImagePreview({
        images: this.film.photos,
        closeable: true,
        closeIconPosition: 'top-left',
        startPosition: index
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.film-photos {
  padding: 15px;
  border-top: 10px solid #f4f4f4;
  .film-photos-title {
    padding-bottom: 15px;
    color: #191a1b;
    display: flex;
    justify-content: space-between;
    .film-photos-all {
      margin-top: 2px;
      font-size: 13px;
      color: #797d82;
      i {
        font-size: 12px;
      }
    }
  }
  .film-photos-swiper {
    height: 100px;
    .photo-item {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }
    .photo-item-picture {
      width: 160px;
      height: 100px;
      background-size: cover;
      background-position: center;
      cursor: pointer;
    }
  }
  h3 {
    font-size: 17px;
    line-height: 54px;
    text-align: center;
    font-weight: normal;
    height: 54px;
  }
  .all-photo-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .all-photo-item {
      width: calc(33.3333vw - 2px);
      height: calc(33.3333vw - 2px);
      margin: 1px;
      cursor: pointer;
    }
  }
}
</style>
